<template>
  <!-- 场景3 -->
  <div>
    <!-- 表单 -->
    <el-form label-width="100px">
      <el-form-item label="SKU名称">
        <el-input  placeholder="请你输入SKU名称" size="default" v-model="SkuParams.skuName"></el-input>
      </el-form-item>
      <el-form-item label="SKU价格(元)">
        <el-input label="SKU名称" placeholder="请你输入SKU价格" size="default" v-model="SkuParams.price"></el-input>
      </el-form-item>
      <el-form-item label="SKU重量(客)">
        <el-input  placeholder="请你输入SKU重量" size="default" v-model="SkuParams.weight"></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
        <el-input  placeholder="请你输入SKU名称" size="default" type="textarea" v-model="SkuParams.skuDesc"></el-input>
      </el-form-item>
      <!-- 选择下拉框 -->

      <el-form-item label="平台属性">
        <el-form inline>

          <el-form-item :label="sale.attrName" inline="true" v-for="(sale, index) in saleList" :key="sale.id">
            <el-select placeholder="请选择" size="large" v-model="AttrValue[index]">
              <el-option :label="saleAtrrValue.valueName" :value="saleAtrrValue.id"
                v-for="(saleAtrrValue, index) in sale.attrValueList" :key="saleAtrrValue.id" />
            </el-select>
          </el-form-item>

        </el-form>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-form inline>
          <el-form-item :label="s.saleAttrName" v-for="(s,index) in saleValue" :key="s.id">
            <el-select placeholder="请选择" size="large" v-model="SaleValuemodele[index]">
              <el-option :label="ss.saleAttrValueName" :value="ss.id"  v-for="(ss,index) in s.spuSaleAttrValueList" :key="ss.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>


      <!-- 表格 -->
      <el-table border stripe style="margin-bottom: 15px;" :data="SpuImgList" ref="imgList">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="图片">
          <!-- row为每一条照片墙,即为一个对象 -->
          <template #="{row,$index}">
              <img :src="row.imgUrl" alt="" style="width: 100px;height: 90px;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName">
        </el-table-column>
        <el-table-column label="操作">
          <template #="{row,$index}">
            <el-button 
            @click="CheckImg(row,$index)"
             :type="$index==imgIndex?'danger':'primary'">
             {{$index==imgIndex?'默认图片':'设为默认'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 按钮 -->
      <el-button type="primary" @click="AddSku">保存</el-button>
      <el-button type="info" @click="cancel">取消</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted ,nextTick} from 'vue'
import { ElMessage } from 'element-plus';
import { reqAttr, } from '@/api/product/attr/index';
import {reqSpuBaseAttr,reqSupImgList,reqADDSku} from '@/api/product/spu/index'
// import { Attr } from '@/api/product/spu/types/index'
// 引用小仓库
import UseCategoryStore from '@/stores/category';

// 调用小仓库
const CategoryStore = UseCategoryStore()

// 存放平台属性的起始值
let saleList = ref<any>([])
// 存放某一个销售属性的起始值
let saleValue = ref<any>([])
// 存放SPU照片墙的起始值
let SpuImgList = ref<any>([])

let imgIndex = ref(0)
// 绑定平台属性的数据
let AttrValue = ref([])
// 绑定销售属性的数据
let SaleValuemodele = ref([])
// 获取表格照片墙的实例
let imgList = ref()

// 收集数据
let SkuParams = reactive<any>({
    //父组件提供的
    "category3Id": "",//三级分类的ID
    "spuId": "",//已有的SPU的ID
    "tmId": "",//已有的SPU的品牌的ID
    //v-model
    "skuName": "",//新增SKU的名字
    "price": '',//新增SKU的价格
    "weight": '',//SKU重量
    "skuDesc": "",//SKU描述
    "skuAttrValueList": [//平台属性的手机数据
        // {
        //     "attrId": "",//属性的ID
        //     "valueId": "",//属性值的ID
        // }
    ],
    "skuSaleAttrValueList": [
        // {
        //     "saleAttrId": 0,
        //     "saleAttrValueId": 0,

        // }
    ],

    "skuDefaultImg": '',//SKU商品图片默认图地址
    "id":'',
})

// 获取平台属性的接口
// 接受自定义事件
let $emit = defineEmits(['sence'])

// 触发自定义事件通知爹来切换场景
let cancel = () => {
  $emit('sence', 0)
}

// 对外暴露方法：获取平台属性|照片墙|销售属性
const initSKu = async (spuArr: any) => {
  //获取已有的SPU的ID
  SkuParams.spuId = spuArr.id
  //获取已有的SPU的品牌的ID
  SkuParams.tmId = spuArr.tmId
  // 获取平台属性(从小仓库结构出来)
  let { c1Id, c2Id, c3Id } = CategoryStore
  //获取三级分类的ID
  SkuParams.category3Id = c3Id
  // 发请求获取平台属性
  let res: any = await reqAttr(c1Id as number, c2Id as number, c3Id as number)
  // 存储平台属性
  saleList.value = res
  // 发请求获取销售属性
  let res1 = await reqSpuBaseAttr(spuArr.id)
  // 存储销售属性
  saleValue.value = res1
  let res2 = await reqSupImgList(spuArr.id)
  // 存储照片墙
  SpuImgList.value = res2
  // 用于获取最新的dom元素,选中复选框
  nextTick(()=>{
      imgList.value.toggleRowSelection(res2[0],true)
  })
  // 设置第一张图片的默认地址
  SkuParams.skuDefaultImg = res2[0].imgUrl
}

// 照片墙设置默认的回调
let CheckImg = (row:any,index:number)=>{
    //默认图片
    SkuParams.skuDefaultImg = row.imgUrl
    // 点击的图片设为默认
    imgList.value.toggleRowSelection(SpuImgList.value[ imgIndex.value ],false)
    // 点击设置为默认照片
    imgIndex.value = index;
    // 挂载的时候第一张图片设置默认图片
    imgList.value.toggleRowSelection(SpuImgList.value[index],true)
}



// 添加SKU
let AddSku = async()=>{
  // console.log(row)
  // 收集平台属性的参数

 
 let a  = AttrValue.value.map((item,index)=>{
    return  {
            attrId: saleList.value[index].id,//属性的ID
            valueId: item,//属性值的ID
         }
  })
  //去除数组中的空字符
  SkuParams.skuAttrValueList = a.filter((item)=>{
    return item
 })

  // 收集销售属性的参数
let b =  SaleValuemodele.value.map((item,index)=>{

    return {
        saleAttrId: saleValue.value[index].id,
        saleAttrValueId:item,
    } 
})
 //去除数组中的空字符
SkuParams.skuSaleAttrValueList = b.filter((item=>{
   return item
}))

  // console.log(SkuParams)
 let result =  await reqADDSku(SkuParams).then(()=>{
  console.log(SkuParams)
    ElMessage({
      type:'success',
      message:'添加成功!'
    })
    // 清空数组
    Object.assign(SkuParams,{
    //父组件提供的
    "category3Id": "",//三级分类的ID
    "spuId": "",//已有的SPU的ID
    "tmId": "",//已有的SPU的品牌的ID
    //v-model
    "skuName": "",//新增SKU的名字
    "price": '',//新增SKU的价格
    "weight": '',//SKU重量
    "skuDesc": "",//SKU描述
    "skuAttrValueList": [//平台属性的手机数据
        // {
        //     "attrId": "",//属性的ID
        //     "valueId": "",//属性值的ID
        // }
    ],
    "skuSaleAttrValueList": [
        // {
        //     "saleAttrId": 0,
        //     "saleAttrValueId": 0,

        // }
    ],

    "skuDefaultImg": '',//SKU商品图片默认图地址
    "id":'',
})
 }).catch(()=>{
  ElMessage({
      type:'error',
      message:'添加失败!'
    })
 })
 console.log(result)

}


// 对外暴露方法
defineExpose({
  initSKu
})






</script>

<script lang="ts">
export default {
  name: 'Form'
}
</script>

<style lang="scss" scoped></style>